办法一 clear:both

<div style="float:left;background:red;">float:left</div>
<div style="float:right;background:green;">float:right</div>
<div style="clear:both;background:blue;">after float</div>

办法1.5 self clear

和办法一本质是一样的。

<div style="float:left;background:red;">float:left</div>
<div style="float:right;background:green;" class="clearfix">float:right</div>
<div style="clear:both;background:blue;">after float</div>

<style>
.clearfix:after {
    content:' ';
    display:table;
    clear:both;    
}
.clearfix {
    *zoom:1;
}
</style>

办法二 父容器 overlfow(auto,scroll,hidden) 并且 width(或者height)

<div style="overflow:auto;width: 100%;">
<div style="float:left;background:red;">float:left</div>
<div style="float:right;background:green;">float:right</div>
</div>
<div style="background:blue;">after float</div>

结论

现在最常用的是 办法 1.5(self clear float)，办法1.5 和 二 的好处是 semantic，不破坏 dom 结构。

via http://www.quirksmode.org/css/clearing.html